<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>07_事件处理</title>
  </head>
  <body>
    <!--
1. 绑定监听:
  v-on:xxx="fun"
  @xxx="fun"
  @xxx="fun(参数)"
  默认事件形参: event
  隐含属性对象: $event
2. 事件修饰符:
  .prevent : 阻止事件的默认行为 event.preventDefault()
  .stop : 停止事件冒泡 event.stopPropagation()
3. 按键修饰符
  .keycode : 操作的是某个keycode值的健
  .enter : 操作的是enter键
-->

    <div id="example">
      <h2>1. 绑定监听</h2>
      <button v-on:click="handleClick1">按钮1</button>
      <button @click="handleClick2">按钮2</button>
      <button @click="handleClick3">按钮3</button>
      <button @click="handleClick4(111,222,333,444)">按钮4</button>
      <button @click="handleClick5(111,222,333,444,$event)">按钮5</button>
      <button @click="handleClick6()">按钮6</button>

      <p>{{num}}</p>
      <button @click="handleClick7">按钮7</button>
      <button @click="num++">按钮8</button>

      <h2>2. 事件修饰符</h2>
      <a href="http://www.atguigu.com" @click.prevent>硅谷硅谷</a>
      <form action="xxx">
        <button type="submit" @click.prevent="handleClick8">提交1</button>
      </form>
      <form action="xxx" @submit.prevent="handleClick8">
        <button type="submit">提交2</button>
      </form>

      <ul @click.self.once="handleClick9">
        <li>11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
        <li>55</li>
      </ul>

      <h2>3. 按键修饰符</h2>
      <input type="text" @keyup.13="handlekeyup" />
      <input type="text" @keyup.enter="handlekeyup" />
    </div>

    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      new Vue({
        el: "#example",
        data: {
          num: 0,
        },
        methods: {
          handleClick1() {
            console.log(this);
          },
          handleClick2: () => {
            console.log(this);
          },
          handleClick3(event) {

          },
          handleClick4(...args) {
            console.log(args);
          },
          handleClick5(...args) {
            console.log(args);
          },
          handleClick6(...args) {
            console.log(...args);
          },
          handleClick7() {
            this.num++;
          },
          handleClick8(event) {

          },
          handleClick9() {
            console.log("hello Click");
          },
          handleKeyup(e) {
            console.log("enter");
          },
        },
      });
    </script>
  </body>
</html>
